<template>
    <div>
      <van-tabbar v-model="hover">
        <van-tabbar-item to="/index">
          <span class="tab-text">首页</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix='icon' name='shouye' size="24" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/dataManage">
          <span class="tab-text">数据</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix='icon' name='shuju' size="24" />
          </template>
        </van-tabbar-item>

        <!--<van-tabbar-item to="/search">-->
          <!--<span class="tab-text">查询</span>-->
          <!--<template #icon="props">-->
            <!--<van-icon class="iconfont" class-prefix='icon' name='B' size="24" />-->
          <!--</template>-->
        <!--</van-tabbar-item>-->

        <van-tabbar-item to="/monitor">
          <span class="tab-text">温控</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix='icon' name='B' size="24" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/warehouse">
          <span class="tab-text">仓管</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix='icon' name='cangku' size="24" />
          </template>
        </van-tabbar-item>

        <van-tabbar-item icon="setting-o" to="/setup">
          <span class="tab-text">设置</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix='icon' name='shezhi' size="24" />
          </template>
        </van-tabbar-item>

      </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "tabBar",

        data(){
          return {
            hover:this.active
          }
        },
      props:{
        active:{
          type:Number,
          default(){
            return 0
          }
        },
      },
    }
</script>

<style scoped>
  .tab-text{
    font-size: .28rem;
  }
</style>
